<template>
  <cu-layout :navProp="{ title: roomData.name, textColor: '#fff' }">
    <view :class="[`${prefixCls}-details-container`]">
      <view class="banner-container">
        <banner
          v-if="bannerData.banner.length"
          :vrCover="bannerData.vr_cover"
          :videoUrl="bannerData.video_url"
          :videoCover="bannerData.video_cover"
          :projectImages="bannerData.banner"
          @openVR="openVR"
          @changeSwiper="changeSwiper"
          @videoEnded="handleVideoEnded"
          ref="bannerSwiper"
        />
      </view>
      <!-- 详情信息 -->
      <view class="room-info card">
        <view class="name">{{ roomData.name }}</view>
        <view class="tags">
          <view class="tag-item" v-for="(item, index) in roomData.tag" :key="index">{{ item }}</view>
        </view>
        <view class="price">{{ roomData.price }}<span class="unit">元/间/月</span></view>
      </view>
      <!-- 户型和房源 -->
      <!-- <uv-sticky offsetTop="0" :customNavHeight="$Platform.navbar" bgColor="#fff" style="margin: 0 15rpx">
        <uv-tabs lineColor="#ff7029" :list="list" @click="stickyChange"></uv-tabs>
      </uv-sticky> -->
      <view class="sticky-box" :style="{ top: $Platform.navbar + 'px' }">
        <uv-tabs lineColor="#046f7e" :list="list" @click="stickyChange"></uv-tabs>
      </view>
      <!-- 户型数据及模块展示 -->
      <view v-show="current === 0">
        <!-- 户型数据展示 -->
        <unit-type :filterTags="unitTypeData.filterTags" :list="unitTypeData.list" @emit-changeTag="changeUnitTypeTag" />
        <!-- 门店配套 -->
        <view v-if="supportsData.facility && supportsData.facility.length" class="supports-info card">
          <view class="name">
            <span>{{ supportsData.name }}</span>
          </view>
          <view class="supports-list">
            <view class="supports-item" v-for="(item, index) in supportsData.facility" :key="index">
              <image :src="item.icon" />
              <view class="title">{{ item.title }}</view>
            </view>
          </view>
          <view class="view-more" @click="unitTypeviewMore({ title: supportsData.name, list: supportsData.facility })">
            <span>查看更多</span>
            <uv-icon name="play-right-fill" color="#046f7e" size="8"></uv-icon>
          </view>
        </view>
        <!-- 位置周边 -->
        <view class="periphery-info card">
          <view class="name">
            <span>{{ peripheryData.name }}</span>
            <view class="look-store">
              <span @click="getLocation">查看介绍</span>
              <uv-icon name="arrow-right" size="8"></uv-icon>
            </view>
          </view>
          <view class="periphery-list" @click="getLocation">
            <image
              :src="`${$MAP.serveimgUrl}?ak=${$MAP.KEY}&center=${peripheryData.longitude},${peripheryData.latitude}&width=327&height=120&zoom=15&scale=2`"
              v-if="$MAP.Channel === 'BMAP'"
            />
            <image
              :src="`${$MAP.serveimgUrl}?key=${$MAP.KEY}&location=${peripheryData.longitude},${peripheryData.latitude}&size=327*120&zoom=15&scale=2`"
              v-else-if="$MAP.Channel === 'AMAP'"
            />
            <image
              :src="`${$MAP.serveimgUrl}?key=${$MAP.KEY}&center=${peripheryData.longitude},${peripheryData.latitude}&size=327*120&zoom=15&scale=2`"
              v-else-if="$MAP.Channel === 'QMAP'"
            />
            <view class="center-title">{{ peripheryData.project_name }}</view>
            <view class="buttom-text">{{ peripheryData.address }}</view>
          </view>
          <view class="view-more" @click="locationViewMore({ title: peripheryData.name, list: peripheryData.extend_info })">
            <span>查看更多</span>
            <uv-icon name="play-right-fill" color="#046f7e" size="8"></uv-icon>
          </view>
        </view>
        <!-- 租房须知 -->
        <view v-if="noticeData.noticeInfo && noticeData.noticeInfo.length" class="notice-info card">
          <view class="name">
            <span>{{ noticeData.name }}</span>
          </view>
          <view class="notice-list">
            <view class="notice-item" v-for="(item, index) in noticeData.noticeInfo" :key="index">
              <view class="title">{{ item.title }}</view>
              <view class="title">{{ item.value }}</view>
            </view>
          </view>
        </view>
        <!-- 常见问题 -->
        <!-- problems -->
        <view v-if="problemsData.problemsInfo && problemsData.problemsInfo.length" class="problems-info card">
          <view class="name">{{ problemsData.name }}</view>
          <view class="problems-list">
            <view
              class="problems-item"
              v-for="(item, index) in problemsData.problemsInfo"
              :key="index"
              @click="handleproblem({ title: problemsData.name, list: problemsData.problemsInfo })"
            >
              <image :src="$CDN('/customer/static/images/icons/comment.png')" />
              <span class="name-value">{{ item.question }}</span>
            </view>
          </view>
        </view>
      </view>
      <!-- 房源模块展示 -->
      <view v-show="current === 1">
        <housing v-if="housingDataParams.filterList.length" :filterTags="housingDataParams.filterList" :housingList="housingDataParams.recordsList" @emit-change="changeTag" />
      </view>
      <!-- 推荐户型 -->
      <view v-if="recommendProjectData.recommendProjectInfo && recommendProjectData.recommendProjectInfo.length" class="supports-info card">
        <view class="name">
          <span>{{ recommendProjectData.name }}</span>
        </view>
        <view class="supports-list">
          <scroll-block style="width: 100%" :dataList="recommendProjectData.recommendProjectInfo" :type="recommendProjectData.type"></scroll-block>
        </view>
      </view>
      <!-- fixed button -->
      <view class="fixed-button">
        <view class="button-group">
          <view class="service_phone" :style="{ marginRight: see_house_enabled == 1 ? '20px' : '' }" @click="handleServicePhone()">电话咨询</view>
          <view v-if="see_house_enabled == 1" class="move-house" @click="handleSeeRoom()">
            <span>预约看房</span>
            <span v-if="amout" class="amout">{{ '领' + amout + '元券' }}</span>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <!-- 户型配套弹窗 -->
      <supportsPopup ref="ref-view-more" />
      <!-- 位置周边弹窗 -->
      <locationPopup ref="ref-location-more" />
      <!-- 常见问题 -->
      <problemPopup ref="ref-problems" />
      <!-- 预约看房弹窗 -->
      <reserve-time-popup ref="ref-reserve" />
    </view>
  </cu-layout>
</template>

<script>
// #ifdef APP-PLUS
// #endif
import Helper from '@/common/helper'
import { mapActions, mapGetters } from 'vuex'
import scrollBlock from '../../../main/components/scroll-block.vue'
import banner from '.././components/banner.vue'
import locationPopup from '../components/location-popup.vue'
import problemPopup from '../components/problem-popup.vue'
import supportsPopup from '../components/supports-popup.vue'
import { findFilterItem, findRoomList, getConponInfo, projectDetail } from './../api.js'
import housing from './../components/housing.vue'
import reserveTimePopup from './../components/reserve-time-popup.vue'
import unitType from './../components/unit-type.vue'

export default {
  name: 'details-page',
  components: {
    banner,
    supportsPopup,
    locationPopup,
    scrollBlock,
    problemPopup,
    unitType,
    housing,
    reserveTimePopup,
  },
  mixins: [],
  props: {},
  data() {
    return {
      amout: '',
      service_phone: '',
      current: 0,
      list: [{ name: '户型' }],
      bannerData: {
        vr_cover: '',
        video_url: '',
        video_cover: '',
        banner: [],
      },
      // 描述
      roomData: {
        name: '',
        house_structure: '',
        price: '',
        area: '',
      },
      // 推荐户型
      unitTypeData: {
        allData: [],
        filterTags: [],
        list: [],
      },
      // 门店配套
      supportsData: {
        content: '',
        facility: [],
      },
      // 位置周边
      peripheryData: {
        project_name: '',
      },
      // 住房须知
      noticeData: {},
      // 常见问题
      problemsData: {},
      // 附近门店推荐
      recommendProjectData: {},
      // 搜索房源入参等参数
      housingDataParams: {
        page: 1,
        length: 20,
        rangeValue: [],
        facility: [],
        structure: [],
        time_checkin: [],
        towards: [],
        when_checkin: [],
        recordsList: [], // 列表显示数据
        filterList: [], // 筛选条件传入子组件数据
      },
      see_house_enabled: 0,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo', 'isLogin']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {
    if (this.current === 1) {
      if (this.housingDataParams.total > this.housingDataParams.list) {
        this.housingDataParams.page++
        this.getHousingData()
        console.log('1')
      }
    }
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      await this.getDetail()
      await this.getHousingSearchParams()
      await this.getHousingData()
      this.isLogin && (await this.getConponInfo())
    },
    async getDetail() {
      const { projectId } = this.$Route.query
      const { latitude, longitude } = this.locationInfo
      const { data } = await projectDetail({ id: projectId, latitude, longitude })
      this.see_house_enabled = data.see_house_enabled
      this.service_phone = data.service_phone
      // 轮播
      const { info: bannerInfo } = data.pageList.find((v) => v.type === 'projectImages')
      let { imgs: banner, video_cover, video_url, vr_content, vr_cover } = bannerInfo
      const regex = /(\?OSSAccessKeyId=.*&Expires=.*&Signature=.*)/
      video_url = video_url.replace(regex, '')
      this.bannerData = { banner, video_cover, video_url, vr_content, vr_cover }
      // 描述
      const projectIndex = this.findIndex(data.pageList, 'projectInfo')
      if (projectIndex != -1) {
        const { info: detailInfo, name } = data.pageList.find((v) => v.type === 'projectInfo')
        const { show_price, tag } = detailInfo
        this.roomData = { name, price: show_price, tag }
      }
      // 位置周边
      const trafficIndex = this.findIndex(data.pageList, 'traffic')
      if (trafficIndex != -1) {
        const { info: trafficInfo, name: trafficName } = data.pageList.find((v) => v.type === 'traffic')
        const { address: trafficAddrss, latitude: city_latitude, longitude: city_longitude, projectName: project_name, extend_info } = trafficInfo
        this.peripheryData = { address: trafficAddrss, name: trafficName, latitude: city_latitude, longitude: city_longitude, project_name, extend_info }
      }
      //推荐户型
      const unitTypeIndex = this.findIndex(data.pageList, 'projectRecommendRoomType')
      if (unitTypeIndex != -1) {
        const { info: unitTypeInfo } = data.pageList.find((v) => v.type === 'projectRecommendRoomType')
        let { filterTags, list, tabStructureList } = unitTypeInfo
        filterTags = filterTags.map((v) => {
          return {
            title: v,
            select: false,
            type: 'tag',
          }
        })
        tabStructureList = tabStructureList.map((v) => {
          return {
            title: v.title,
            select: false,
            type: 'structureTag',
          }
        })
        this.unitTypeData = {
          name: '户型',
          // filterTags: [...tabStructureList, ...filterTags],
          filterTags: [...filterTags],
          allData: list,
          list,
        }
      }
      // 门店配套
      const supportsIndex = this.findIndex(data.pageList, 'projectSupports')
      if (supportsIndex != -1) {
        const { info: projectInfo, name: projectName } = data.pageList.find((v) => v.type === 'projectSupports')
        const { facility } = projectInfo
        this.supportsData = { name: projectName, facility }
      }
      // 租房须知
      const noticeIndex = this.findIndex(data.pageList, 'notice')
      if (noticeIndex != -1) {
        const { info: noticeInfo, name: noticeName } = data.pageList.find((v) => v.type === 'notice')
        this.noticeData = { name: noticeName, noticeInfo }
      }
      // 常见问题
      const problemsIndex = this.findIndex(data.pageList, 'problems')
      if (problemsIndex != -1) {
        const { info: problemsInfo, name: noticeName } = data.pageList.find((v) => v.type === 'problems')
        this.problemsData = { problemsInfo, name: noticeName }
      }
      // 附近门店推荐
      const recommendProjectIndex = this.findIndex(data.pageList, 'recommendProject')
      if (recommendProjectIndex != -1) {
        const { info: recommendProjectInfo, name: recommendProjectName, type } = data.pageList.find((v) => v.type === 'recommendProject')
        this.recommendProjectData = { recommendProjectInfo, name: recommendProjectName, type }
      }
    },
    // 获取房源数据
    async getHousingData() {
      const { projectId } = this.$Route.query
      const { cityId } = this.cityConfig
      const { page, length, facility, structure, time_checkin, towards, when_checkin, rangeValue } = this.housingDataParams
      const params = {
        projectId: projectId,
        // projectId: '3a0d967e-995f-1750-895e-b7cef27adb67',
        city_id: cityId,
        // city_id: 'ad969e39-3439-11e6-8744-00163e003632',
        page,
        length,
        facility: JSON.stringify(facility),
        structure: JSON.stringify(structure),
        time_checkin: JSON.stringify(time_checkin),
        towards: JSON.stringify(towards),
        when_checkin: JSON.stringify(when_checkin),
        minPrice: rangeValue.length ? rangeValue[0] : [],
        maxPrice: rangeValue.length ? rangeValue[1] : [],
      }
      const { data } = await findRoomList(params)
      const { recordsList, recordsTotal } = data
      if (recordsList.length != 0) {
        this.list = [{ name: '户型' }, { name: '房源' }]
      }
      this.housingDataParams.recordsList = [...this.housingDataParams.recordsList, ...recordsList]
      this.housingDataParams.total = recordsTotal
      // if (recordsTotal >= this.housingDataParams.recordsList.length) {
      //   this.housingDataParams.recordsList = recordsList
      //   // this.housingDataParams.recordsList = [...this.housingDataParams.recordsList, ...recordsList]
      // } else {
      //   // 没有更多
      // }
    },
    // 获取房源搜索参数
    async getHousingSearchParams() {
      const { cityId } = this.cityConfig
      const { data } = await findFilterItem({ city_id: cityId })
      this.housingDataParams.filterList = data.filterList
    },
    // 获取可获得的优惠券价格
    async getConponInfo() {
      const { projectId } = this.$Route.query
      const { data } = await getConponInfo({ projectId })
      this.amout = data.amout
    },
    // 查找当前有没有这个类型
    findIndex(list, type) {
      const index = list.findIndex((v) => v.type === type)
      return index
    },
    changeSwiper() {},
    handleVideoEnded() {
      this.$refs.bannerSwiper.submitVideoTime()
    },
    openVR() {},
    // 查看更多
    unitTypeviewMore({ title, list }) {
      this.$refs['ref-view-more'].open({ title, list })
    },
    locationViewMore({ title, list }) {
      this.$refs['ref-location-more'].open({ title, list })
    },
    handleproblem({ title, list }) {
      this.$refs['ref-problems'].open({ title, list })
    },
    getLocation() {
      uni.openLocation({
        latitude: this.peripheryData.latitude * 1, // 要去的纬度-地址
        longitude: this.peripheryData.longitude * 1, // 要去的经度-地址
        name: this.peripheryData.project_name,
        address: this.peripheryData.address,
        scale: 15,
      })
    },
    async handleServicePhone() {
      const phone = this.service_phone
      Helper.callPhone(phone)
    },
    stickyChange(item) {
      this.current = item.index
    },
    changeTag(value) {
      console.log('value', value)
      for (let key in value) {
        this.housingDataParams[key] = value[key]
      }
      this.housingDataParams.recordsList = []
      this.housingDataParams.page = 1
      this.getHousingData()
    },
    changeUnitTypeTag(value) {
      this.unitTypeData.filterTags[value].select = !this.unitTypeData.filterTags[value].select
      const selected = this.unitTypeData.filterTags
        .filter((v) => v.select)
        .map((v1) => {
          return v1.title
        })
      this.unitTypeData.list = this.unitTypeData.allData.filter((item) => selected.every((tags) => item.tags.includes(tags)))
    },
    handleSeeRoom() {
      console.log(this.$Route.query)
      this.$refs['ref-reserve'].open()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('details-container')} {
  position: relative;
  padding-bottom: 100px;
  .banner-container {
    height: 564rpx;
  }
  .card {
    width: calc(100% - 32rpx);
    box-sizing: border-box;
    margin: 16rpx;
    padding: 32rpx 32rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx;
  }
  .view-more {
    display: flex;
    justify-content: center;
    width: calc(100% - 32rpx);
    margin: 32rpx 0 8rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: bold;
    color: $uv-primary;
    line-height: 36rpx;
    margin-right: 6rpx;
  }
  .room-info {
    .name {
      font-size: 40rpx;
      text-align: left;
      font-weight: bold;
      color: #222222;
      max-width: 100%;
      margin-bottom: 16rpx;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      .tag-item {
        padding: 0rpx 11rpx;
        text-align: center;
        background-color: #f5f5f5;
        font-size: 24rpx;
        color: #999999;
        margin-right: 8rpx;
        border-radius: 8rpx;
      }
    }
    .price {
      margin-top: 20rpx;
      margin-bottom: 32rpx;
      align-items: flex-end;
      color: $uv-price-primary;
      font-weight: bold;
      font-size: 48rpx;
      .unit {
        font-size: 20rpx;
        margin-left: 8rpx;
      }
    }
  }
  .sticky-box {
    position: sticky;
    z-index: 1;
    background: white;
    margin: 0 16rpx;
    padding-bottom: 16rpx;
  }
  .housing {
    width: 100%;
    background: #fef7e5;
  }
  .supports-info {
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      width: 423rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 30rpx;
    }
    .supports-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .supports-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        margin-bottom: 46rpx;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 12rpx;
        }
        .title {
          font-size: 24rpx;
          font-weight: 400;
          color: #222222;
          line-height: 34rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .supports-content {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      width: 100%; /* 容器宽度 */
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 指定显示的行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  .project-info {
    .name {
      width: 100%;
      display: flex;
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .look-store {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin-right: 8rpx;
      }
    }
    .project {
      margin-top: 32rpx;
      width: 100%;
      height: 240rpx;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 16rpx;
      overflow: hidden;
    }
    .address {
      font-size: 24rpx;
      font-weight: 500;
      color: #222222;
      line-height: 34rpx;
      margin: 24rpx 0 16rpx;
    }
    .tag-wrap {
      display: flex;
      flex-wrap: wrap;
      .tag-item {
        padding: 4rpx 8rpx;
        font-size: 22rpx;
        font-weight: 400;
        background-color: #f5f5f5;
        color: #999;
        border-radius: 8rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }
    }
  }
  .periphery-info {
    .name {
      min-width: 100%;
      display: flex;
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      width: 423rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 30rpx;
      .look-store {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin-right: 8rpx;
      }
    }
    .periphery-list {
      width: 654rpx;
      height: 240rpx;
      background: #dfe7ef;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .center-title {
        padding: 18rpx 40rpx;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        width: fit-content;
        height: 36px;
        box-sizing: border-box;
        border-radius: 16rpx;
        background: white;
        font-size: 24rpx;
        font-weight: bold;
        color: #222222;
      }
      .buttom-text {
        bottom: 0;
        width: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        padding: 10px;
        color: white;
        font-size: 12px;
      }
    }
  }
  .notice-info {
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      width: 423rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 30rpx;
    }
    .notice-list {
      .notice-item {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #222222;
        margin-bottom: 30rpx;
        font-weight: 400;
      }
    }
  }
  .problems-info {
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
    }
    .problems-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 40rpx;
      .problems-item {
        image {
          width: 32rpx;
          height: 32rpx;
        }
        .name-value {
          flex: 1;
          margin-left: 5rpx;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
        }
        // width: 320rpx;
        width: calc((100% / 2) - 16rpx);
        height: 64rpx;
        padding: 14rpx 16rpx 14rpx 24rpx;
        background: #f5f5f5;
        border-radius: 16rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
  .fixed-button {
    width: 100%;
    background: white;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    .button-group {
      display: flex;
      padding: 16rpx 32rpx;
      .service_phone {
        // background: linear-gradient(90deg, #ff9d57 0%, #ff7733 100%);
        background: linear-gradient(87deg, #2ca6e0 0%, #00a07c 100%);
        flex: 1;
        padding: 20rpx 0;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        border-radius: 16rpx;
        // margin-right: 20px;
      }
      .move-house {
        background: linear-gradient(87deg, #2ca6e0 0%, #00a07c 100%);
        // background: linear-gradient(90deg, #ff9d57 0%, #ff7733 100%);
        flex: 1;
        padding: 20rpx 0;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        border-radius: 16rpx;
        position: relative;
        .amout {
          padding: 5rpx 8rpx;
          background: #fff48b;
          position: absolute;
          color: #95390a;
          right: 8rpx;
          border-radius: 8rpx;
          font-size: 10px;
          top: -10px;
        }
      }
    }
  }
}
</style>
